<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
	  xmlns:th="http://www.thymeleaf.org"
	  lang="zh-cn">
<head>
	<meta charset="UTF-8"/>
	<meta content="云之讯,云通讯,云通讯平台" name="keywords"/>
	<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
	<title>云之讯-数据能力平台</title>
	<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1"/>
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
	<!--[if lt IE 9]>
	<meta http-equiv="refresh" content="0;ie.html" />
	<![endif]-->
	<link rel="shortcut icon" th:href="@{/img/favicon.ico}" type="image/x-icon">

	<link th:href="@{/css/bootstrap.min14ed.css?v=3.3.6}" rel="stylesheet">
	<link th:href="@{/css/font-awesome.min93e3.css?v=4.4.0}" rel="stylesheet">
	<link th:href="@{/css/animate.min.css}" rel="stylesheet">
	<link th:href="@{/css/style.min862f.css?v=4.1.1}" rel="stylesheet">
	<style type="text/css">
		.J_menuItem {
			padding: 7px 15px 7px 52px;
			padding-left: 52px;
			color: #a7b1c2;
			cursor: pointer;
		}
		.nav-second-level li span:hover{
			color: white;
		}
		.activecolor {
			color: white;
		}
		[v-cloak] {
			display: none;
		}
		.show {
			display: block;
		}
		.hide {
			display: none;
		}
	</style>
</head>

<body class="fixed-sidebar full-height-layout gray-bg" style="overflow:hidden">
<div id="wrapper" v-cloak>
	<!--左侧导航开始-->
	<nav class="navbar-default navbar-static-side" role="navigation">
		<div class="nav-close"><i class="fa fa-times-circle"></i>
		</div>
		<div class="sidebar-collapse">
			<ul class="nav" id="side-menu">
				<li class="nav-header">
					<div class="dropdown profile-element">
						<span><img alt="image" th:src="@{/img/logo-small.png}" /></span>
						<a data-toggle="dropdown" class="dropdown-toggle" href="#"> 
							<!--<span class="clear">-->
                                <!--<span class="block m-t-xs"><strong class="font-bold" th:text="${session.SESSION_USER.realname}">Be</strong></span>-->
                                <!--<span class="text-muted text-xs block" th:text="${session.SESSION_USER.roleName}" >whoAmI<b class="caret"></b></span>-->
							<!--</span>-->
						</a>
						<ul class="dropdown-menu animated fadeInRight m-t-xs">
							<li><a href="login.html" th:href="@{/logout}">安全退出</a>
							</li>
						</ul>
					</div>
					<div class="logo-element"></div>
				</li>


				<li class="nav-first-level" v-for="menu in menus" :class="{hide : (menu.parent_id != currentMenu.menu_id), show : (menu.parent_id === currentMenu.menu_id)}" v-if="menu.level === 2" :id="menu.menu_id"  @click="onMenuClick(menu)" >
					<a href="#" >
						<i class="fa fa fa-bar-chart-o" th:class="'fa '"></i>
						<span class="nav-label" >{{menu.menu_name}}</span>
                        <span class="fa arrow" v-if="menu.menu_url == ''">
					</span>
					</a>
					<ul class="nav nav-second-level" >
						<li v-for="m in menus" v-if="m.parent_id === menu.menu_id" class="J_menuItem">
							<!--<a class="J_menuItem" href="graph_echarts.html"  @click="onMenuClick(m)">-->
								<span :class="{ activecolor: m.menu_url == contentUrl }" @click="onMenuClick(m)">{{m.menu_name}}</span>
							<!--</a>-->
						</li>
					</ul>
				</li>
			</ul>
		</div>
	</nav>
	<!--左侧导航结束-->
	<!--右侧部分开始-->
	<div id="page-wrapper" class="gray-bg dashbard-1">
		<div class="row border-bottom" style="display:none">
			<nav class="navbar navbar-static-top" role="navigation" style="margin-bottom: 0">
				<div class="navbar-header"><a class="navbar-minimalize minimalize-styl-2 btn btn-primary " href="#"><i class="fa fa-bars"></i> </a>

				</div>

			</nav>
		</div>
		<div class="row content-tabs">
			<button class="roll-nav roll-left J_tabLeft"><i class="fa fa-backward"></i>
			</button>
			<nav class="page-tabs J_menuTabs">
				<button class="navbar-minimalize float-e-margins pull-left" href="#"><i class="fa fa-bars"></i> </button>

				<div class="page-tabs-content">
                    <!-- 顶级菜单 -->
					<a v-for="menu in topMenus" href="javascript:;" @click="changeMenu(menu)" :class="{ active: menu.menu_id == currentMenu.menu_id }" class="J_menuTab" data-id="index_v1.html">{{menu.menu_name}}</a>
				</div>
			</nav>
			<a href="login.html" th:href="@{/logout}" class="roll-nav roll-right J_tabExit"><i class="fa fa fa-sign-out"></i> 退出</a>
		</div>
		<div class="row J_mainContent" id="content-main" style="height:90%">
			<iframe id="iframe0" class="J_iframe" name="iframe0" width="100%" height="100%" src="" :src="contentUrl" frameborder="0" data-id="index_v1.html" onload="loadFrame(this)" seamless></iframe>
		</div>
		<div class="footer">
			<div class="text-center">&copy;  深圳市云之讯网络技术有限公司. All Rights Reserved 粤B2-20130213 &nbsp;&nbsp;
				<a href="http://smsc.ucpaas.com/" style="color: #1ab394;" onmouseout="this.style.color='#1ab394'" onmouseover="this.style.color='#82d8c7'" th:href="${smsc_web_url}" target="_blank">
					<i>云之讯数据能力平台</i>
				</a>
			</div>
		</div>
	</div>
	<!--右侧部分结束-->
	<!--右侧边栏开始-->
	<!--右侧边栏结束-->
	<!--mini聊天窗口开始-->
</div>
<script th:src="@{/js/jquery.min.js?v=2.1.4}"></script>
<script th:src="@{/js/bootstrap.min.js?v=3.3.6}"></script>
<script th:src="@{/js/plugins/metisMenu/jquery.metisMenu.js}"></script>
<script th:src="@{/js/plugins/slimscroll/jquery.slimscroll.min.js}"></script>
<script th:src="@{/js/plugins/layer/layer.min.js}"></script>
<script th:src="@{/js/hplus.min.js?v=4.1.0}"></script>
<script th:src="@{/js/contabs.min.js}"></script>
<script th:src="@{/js/common.js?v=1.0.0}"></script>
<script th:src="@{/js/plugins/pace/pace.min.js}"></script>
<script th:src="@{/js/vue/vue.min.js}"></script>
<script th:src="@{/js/vue/vue-resource.min.js}"></script>
<script th:inline="javascript">

	var menus = [[${menus}]];
	var topMenus = [];
	for (var i = 0; i < menus.length; i++) {
	    var menu = menus[i];
	    if(menu.level == 1){
	        topMenus.push(menu);
		}
	}

    var vue = new Vue({
        el: '#wrapper',
		data: {
            menus: menus,
			topMenus:topMenus,
			currentMenu:topMenus[0],
            contentUrl:"/index/welcome",
		},
		methods: {
            changeMenu: function(menu){
				this.currentMenu = menu;
				if(menu.menu_url != ""){
					vue.contentUrl = menu.menu_url;
					vue.resetMenuStyle();
					setTimeout(function () {
                        vue.showSelectedMenu(menu);
                    },50);
				}
            },
            onMenuClick: function (menu) {
                if(menu.menu_url != ""){
                    //有链接内容
                    $('#iframe0').attr('src', menu.menu_url);
                    this.resetMenuStyle();
                    this.showSelectedMenu(menu);
                }
            },
			resetMenuStyle: function () {
                $(".nav").find(".nav-first-level").removeClass("active");
                $(".nav").find(".nav-first-level").removeClass("in");
                $(".nav").find(".nav-second-level").removeClass("in");
                $(".nav").find(".nav-second-level").addClass("collapse");
                $(".nav").find(".nav-second-level").attr("aria-expanded",false);
            },
			//显示被选中的菜单效果
			showSelectedMenu: function (menu) {
                if(vue.contentUrl != menu.menu_url){
                    vue.contentUrl = menu.menu_url
				}
				//当前的顶级菜单
                var temp = vue.getTopMenu(menu);
                if(vue.currentMenu.menu_id != temp.menu_id){
                    vue.currentMenu = temp;
                    setTimeout(function () {
                        vue.showSelectedMenu(menu);
                    },50);
                    return;
				}
				//选中的菜单ID
                var id;
				if(menu.level == 1){
				    //如果点击的是顶级菜单
				    for (var i = 0; i < menus.length; i++) {
				        var m = menus[i];
				        if(m.level == 1){
				            continue;
						}
				        if(m.menu_url == vue.contentUrl){
				            if(m.level == 2){
                                id = "#"+m.menu_id;
							}else {
                                id = "#"+m.parent_id;
							}
                            break;
						}
					}
				}else if(menu.level == 2){
				    //如果点击的是二级菜单
                    id = "#"+menu.menu_id;
                }else {
				    //点击三级菜单
				    id = "#"+menu.parent_id;
				}
                $(id).addClass("active");
                $(id).addClass("in");
                $(id).find(".nav-second-level").addClass("in");//显示菜单
            },
			getTopMenu: function (menu) {
                //
				if(menu.level == 1){
				    return menu;
				}
				for (var i = 0; i < menus.length; i++) {
				    var m = menus[i];
				    if(menu.parent_id == m.menu_id){
				        return vue.getTopMenu(m);
					}
				}
            }
        }
    });
	$(".nav-first-level:first").addClass("active");
	$(".nav-first-level:first").addClass("in");

	function click_menu(el_Pre_url){
		var menu=vue.menus.filter(function (x){return x.menu_url==el_Pre_url})
		if(menu.length&&menu.length>0){
			vue.onMenuClick(menu[0])
		}
	}

    function loadFrame(frame) {
	    if(frame.contentWindow.location.href.indexOf(vue.contentUrl)==-1){
	       for (var i = 0; i < menus.length; i++) {
	           var m = menus[i];
	           if(frame.contentWindow.location.href.indexOf(m.menu_url)>0){
	               //点击返回按钮时显示菜单效果
	               setTimeout(function () {
	                   vue.resetMenuStyle();
                       vue.showSelectedMenu(m);
                   },50);
	              return;
			   }
		   }
		}
    }

</script>
</body>


</html>
